<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
<head>
<link href="resources/flexbox.css" rel="stylesheet">
<script src="../../resources/js-test.js"></script>
</head>
<body>
<div class="flexbox" id="flexbox"></div>
<div class="inline-flexbox" id="flexboxInline"></div>
<script>
description('Test that setting and getting display: flex and inline-flex works as expected');

debug("Test getting |display| set through CSS");
var flexboxElement = document.getElementById("flexbox");
shouldBe("getComputedStyle(flexboxElement, '').getPropertyValue('display')", "'flex'");
var inlineFlexboxElement = document.getElementById("flexboxInline");
shouldBe("getComputedStyle(inlineFlexboxElement, '').getPropertyValue('display')", "'inline-flex'");

debug("");
debug("Test getting and setting display through JS");
var element = document.createElement("div");
document.body.appendChild(element);
shouldBe("getComputedStyle(element, '').getPropertyValue('display')", "'block'");
element.style.display = "flex";
shouldBe("getComputedStyle(element, '').getPropertyValue('display')", "'flex'");

element = document.createElement("div");
document.body.appendChild(element);
shouldBe("getComputedStyle(element, '').getPropertyValue('display')", "'block'");
element.style.display = "inline-flex";
shouldBe("getComputedStyle(element, '').getPropertyValue('display')", "'inline-flex'");
element.style.display = "-webkit-flex";
shouldBe("getComputedStyle(element, '').getPropertyValue('display')", "'flex'");
element.style.display = "-webkit-inline-flex";
shouldBe("getComputedStyle(element, '').getPropertyValue('display')", "'inline-flex'");
</script>
</body>
</html>
